<template>
    <div class="topNav">
        <div class="topNavLeft">
            <!-- 隐藏显示边栏 -->
            <div class="menuToggle">
                <el-icon v-if="menuStore.isCollapse" class="icon" @click="clickShowSliderNav(false)">
                    <Expand />
                </el-icon>
                <el-icon v-else  class="icon" @click="clickHiddenSliderNav(true)">
                    <Fold />
                </el-icon>
            </div>
            <!-- 面包屑 -->
            <div class="menuBreadCrumb">
                <el-breadcrumb>
                    <el-breadcrumb-item>{{ $t("message.navs") }}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ menuStore.breadCrumb }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 语音切换 -->
        <div class="lang">
            <el-dropdown>
                <span class="el-dropdown-link">
                    语言切换
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                        <el-dropdown-item @click="changeLang('zh')">简体中文</el-dropdown-item>
                        <el-dropdown-item @click="changeLang('en')">英语</el-dropdown-item>
                </template> 
            </el-dropdown>
        </div>

        <div class="topNavRight">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ loginStore.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item><router-link to="/userCenter">个人中心</router-link></el-dropdown-item>
                        <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { userLoginStore } from '../../stores/loginStore'
import { userMenuStore } from '../../stores/menuStore'
import { useRouter } from 'vue-router'

const loginStore = userLoginStore();
const router = useRouter();
const menuStore = userMenuStore();

// 折叠侧边栏
const clickHiddenSliderNav = (data) => {
    menuStore.isCollapse = data
}

// 显示侧边栏
const clickShowSliderNav = (data) => {
    menuStore.isCollapse = data
}

// 切换语言
const changeLang=(lang)=>{
    localStorage.setItem('lang',lang)
    // 刷新UI
    location.reload();
}

// 退出登录
const outLogin = () => {
    // 清空存储信息
    loginStore.token = "";
    loginStore.permission = "";
    loginStore.username = "";
    // 回到登录页
    router.push('/login')
}

</script>

<style scoped>
.topNav {
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}

.topNavLeft {
    padding-top: 17.5px;
    padding-left: 10px;
}

.icon {
    font-size: 25px;
}

.menuToggle {
    float: left;
}

.menuBreadCrumb {
    float: left;
    line-height: 60px;
    margin-top: 6px;
    margin-left: 20px;
}

.topNavRight {
    font-size: 15px;
    position: absolute;
    right: 20px;
    top: 25px;
}

.lang{
    float: right;
    margin-right: 120px;
    margin-top: 7.5px;
}
</style>
